<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.1.1.min.js" type="text/javascript"></script>
		<style>
		   *{margin: 0;padding: 0;box-sizing: border-box;}
		   .clearfix:after{display: block;clear: both;content: "";}
			.zong{width: 402px;border: 1px solid;margin: 50px auto;}
			header>div{float: left;width: 100px;height: 40px;background: darkgray;text-align: center;
			   line-height: 40px;border: 1px solid;}
			   
			footer{position: relative;margin-top: 40px;}   
			footer>div{width: 400px;height: 400px;font-size: 50px;color: red;text-align: center;
			   line-height: 400px;border: 1px solid;position: absolute;top: 0;display: none;
			   background: lightseagreen;} 
			   
			.color{background: lightgray;}
			.show{display: block;}     
		</style>
	</head>
	<body>
		<div class="zong">
			<header class="claerfix">
				<div class="color">1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
			</header>
			<footer>
				<div class="show">一</div>
				<div>二</div>
				<div>三</div>
				<div>四</div>
			</footer>
		</div>
		
		<script>
		function fun(a,b){
			$(a).on("click",function(){
				$(a).removeClass('color')
				$(this).addClass('color')
				
				$(b).removeClass('show')
				$(b).eq($(this).index()).addClass('show')
			})
		}
		
		fun('header>div','footer>div')
		</script>
		
	</body>
</html>
